<%@ page import="battleship.CacheFilter" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="et">
<head>
    <title>Laevade pommitamine</title>
    <%--<link rel="stylesheet" type="text/css" href="main.css" />--%>
    <%--<link rel="stylesheet" type="text/css" href="game.css" />--%>
    <%--<link rel="stylesheet" type="text/css" href="replay.css" />--%>
    <%--<script type="text/javascript" src="jquery-1.7.1.js"></script>--%>
    <%--<script type="text/javascript" src="buffer.js"></script>--%>
    <%--<script type="text/javascript" src="local.js"></script>--%>
    <%--<script type="text/javascript" src="replay.js"></script>--%>
    <%--<script type="text/javascript" src="replayAuto.js"></script>--%>
    <%
        final String[] resources = {"main.css", "game.css", "replay.css",
                "min/jquery-1.7.1.js", "min/buffer.js", "min/local.js", "min/replay.js", "min/replayAuto.js"};
        ServletContext context = session.getServletContext();

        for (String resource : resources) {
            out.write(CacheFilter.getResource(context, resource));
        }
    %>
</head>
<body>
<div id="content">
    <div id="title_area">
        <h1 id="title_header">Laevade pommitamine</h1>
    </div>
    <div id="center_area">
        <div id="left">
            <div class="side_board">
                <table id="side_board">
                    <tr>
                        <td class="sb_corner"></td>
                        <td class="sb_topbottomedge">A</td>
                        <td class="sb_topbottomedge">B</td>
                        <td class="sb_topbottomedge">C</td>
                        <td class="sb_topbottomedge">D</td>
                        <td class="sb_topbottomedge">E</td>
                        <td class="sb_topbottomedge">F</td>
                        <td class="sb_topbottomedge">G</td>
                        <td class="sb_topbottomedge">H</td>
                        <td class="sb_topbottomedge">I</td>
                        <td class="sb_topbottomedge">J</td>
                        <td class="sb_corner"></td>
                    </tr>

                    <%
                        for (int row = 1; row <= 10; row++) {
                    %>
                    <tr>
                        <td class="sb_leftrightedge"><%=row%></td>
                        <%
                            for (int col = 1; col <= 10; col++) {
                                int[] coords = new int[2]; coords[0] = row; coords[1] = col;
                                %><td class="sb_square"></td><%
                        }
                    %>
                        <td class="sb_leftrightedge"><%=row%></td>
                    </tr>
                    <%
                        }
                    %>

                    <tr>
                        <td class="sb_corner"></td>
                        <td class="sb_topbottomedge">A</td>
                        <td class="sb_topbottomedge">B</td>
                        <td class="sb_topbottomedge">C</td>
                        <td class="sb_topbottomedge">D</td>
                        <td class="sb_topbottomedge">E</td>
                        <td class="sb_topbottomedge">F</td>
                        <td class="sb_topbottomedge">G</td>
                        <td class="sb_topbottomedge">H</td>
                        <td class="sb_topbottomedge">I</td>
                        <td class="sb_topbottomedge">J</td>
                        <td class="sb_corner"></td>
                    </tr>
                </table>
            </div>
            <div id="ships" >

            </div>
        </div>
        <div id="center">
            <div id="tableDiv">
                <table id="main_board">
                    <tr>
                        <td class="corner"></td>
                        <td class="topbottomedge">A</td>
                        <td class="topbottomedge">B</td>
                        <td class="topbottomedge">C</td>
                        <td class="topbottomedge">D</td>
                        <td class="topbottomedge">E</td>
                        <td class="topbottomedge">F</td>
                        <td class="topbottomedge">G</td>
                        <td class="topbottomedge">H</td>
                        <td class="topbottomedge">I</td>
                        <td class="topbottomedge">J</td>
                        <td class="corner"></td>
                    </tr>

                    <%
                    for (int row = 1; row <= 10; row++) {
                    %>
                        <tr>
                            <td class="leftrightedge"><%=row%></td>
                            <%
                                for (int col = 1; col <= 10; col++) {
                                    %><td class="square"></td><%
                                }
                            %>
                            <td class="leftrightedge"><%=row%></td>
                        </tr>
                    <%
                    }
                    %>

                    <tr>
                        <td class="corner"></td>
                        <td class="topbottomedge">A</td>
                        <td class="topbottomedge">B</td>
                        <td class="topbottomedge">C</td>
                        <td class="topbottomedge">D</td>
                        <td class="topbottomedge">E</td>
                        <td class="topbottomedge">F</td>
                        <td class="topbottomedge">G</td>
                        <td class="topbottomedge">H</td>
                        <td class="topbottomedge">I</td>
                        <td class="topbottomedge">J</td>
                        <td class="corner"></td>
                    </tr>
                </table>
            </div>
            <div class="ready_button">
            </div>
        </div>
        <div id="right">
            <button id="backToReplayBtn" class="button">Tagasi nimekirja juurde</button>
        </div>
    </div>
    <div id="footer">
    </div>
</div>
</body>
</html>